<template>
  <div class="home-wrapper">
    <el-card style="margin: 20px 20px; font-size: 14px">
      <div class="first">
        <p style="font-size:16px;margin-bottom:8px">{{name}}，{{helloText}}</p>
        <p style="font-size:12px;color:rgb(185, 181, 189)">今天是：{{nowTimeText}}</p>
      </div>
    </el-card>
    <div class="hom-bg">
      <img src="../assets/images/hom-bg.png" />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  computed: {
    ...mapGetters(['avatar', 'name']),
    helloText() {
      const hour = moment().hour()
      if (hour < 8) return '早上好';
      if (hour < 12) return '上午好';
      if (hour < 18) return '下午好';
      return '晚上好'
    },
    nowTimeText() {
      return moment().format('YYYY年MM月DD日 HH时mm分ss秒')
    }
  }
}
</script>

<style scoped lang="stylus">
.home-wrapper
  .first {
    float: left;
    width: 50%;
    margin-bottom: 20px;
  }
  .hom-bg {
    display: flex;
    justify-content center
    img {
      width 60%;
    }
  }
</style>
